.site-favicon {
	.site-icon {
		border-radius: 4px;

		&.is-blank {
			background: transparent;
			.wpcom-favicon {
				fill: var(--color-primary-50);
			}

			.no-favicon {
				width: 100%;
				height: 100%;
				background: linear-gradient(45deg, #ff0056, #ff8a78, #57b7ff, #9c00d4);
			}
		}
	}

	&.is-first-grapheme {
		.is-blank,
		.is-primary {
			font-size: xx-large !important;
			text-transform: uppercase;
			border-radius: 4px;
			box-sizing: border-box;
		}

		.is-blank {
			background-color: #f5f7f7;
			border: 1px solid rgb(238, 238, 238);
			color: var(--color-link);
		}

		.is-primary {
			background: linear-gradient(0deg, color-mix(in srgb, var(--color-surface) 32%, transparent) 0%, color-mix(in srgb, var(--color-surface) 32%, transparent) 100%), var(--color-primary);
			color: var(--color-surface);
		}
	}
}
